<template>
  <div class="staLiveDataDetailWrap">
    <van-icon name="cross" @click="geticon" class="icons" />
    <div class="title">
      <h4><van-icon name="location-o" />{{ clickLocation.city }}</h4>
    </div>
    <div class="sldAccount" v-if="!loading">
      <div class="sldATime">
        <span>自 </span>
        <span class="selctTime">{{ startTime }}</span>
        <span> 至 </span>
        <span class="selctTime">{{ endTime }}</span>
        <span>，共 {{ getDiffDay }} 天：</span>
      </div>
      <div class="title" style="font-size: 14px">
        <h3>异常天气</h3>
      </div>
      <div class="sldErrorWeather">
        <!-- <span>雪：20 天，</span>
                <span>雨：20 天，</span>
                <span>沙尘：20 天，</span> -->
        <span>暴雨：{{ elementItem.rain }} 天，</span>
        <span>高温：{{ elementItem.temperature }} 天，</span>
        <span>潮湿：{{ elementItem.humidity }} 天，</span>
        <span>高压：{{ elementItem.pressure }} 天，</span>
        <span>大风：{{ elementItem.windMax }} 天</span>
      </div>
      <div class="title" style="font-size: 14px">
        <h3>气象统计</h3>
      </div>
      <div class="sldACon">
        <template>
          <span>截至今日，最高气温：</span>
          <span
            >{{ liveCensusItem.temperature[0].skzdzsTem }} ℃（{{
              liveCensusItem.temperature[0].skzdzsTime | formatTimeToCon
            }}）,</span
          >
          <span>最低气温：</span>
          <span
            >{{ liveCensusItem.temperature[1].skzdzsTem }} ℃（{{
              liveCensusItem.temperature[1].skzdzsTime | formatTimeToCon
            }}）,</span
          >
          <span>最大湿度：</span>
          <span>
            {{ liveCensusItem.humidity[0].skzdzsRhu }}%（
            {{ liveCensusItem.humidity[0].skzdzsTime | formatTimeToCon }}
            ）,</span
          >
          <span>最低湿度：</span>
          <span>
            {{ liveCensusItem.humidity[1].skzdzsRhu }}%（
            {{ liveCensusItem.humidity[0].skzdzsTime | formatTimeToCon }}）,
          </span>
        </template>

        <template v-if="liveCensusItem.rain.length != 0">
          <span>最大日降水量：</span>
          <span
            >{{ liveCensusItem.rain[0].skzdzsPre24 }} mm（{{
              liveCensusItem.rain[0].skzdzsTime | formatTimeToCon
            }}）,</span
          >
        </template>
        <template>
          <span>最大风速：</span>
          <span
            >{{ liveCensusItem.windmax[0].skzdzsWinsinstmax || 0 }}m/s（
            {{ liveCensusItem.windmax[0].skzdzsTime | formatTimeToCon }}
            ）</span
          >
        </template>
      </div>
    </div>
    <van-popup
      v-model="selectTime"
      get-container="body"
      position="bottom"
      :style="{ width: '100%', height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        @cancel="selectTime = false"
        @confirm="confirmTime"
        type="date"
        title="选择年月日"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>
<script type="text/javascript">
import meteoroStaLiveApi from '@/service/staLiveData.js'

export default {
  props: {
    clickLocation: {
      type: Object,
      default: () => {},
    },
    endTime: {
      type: String,
      default: '',
    },
    startTime: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      elementItem: {},
      liveCensusItem: {},
      loading: true,
      // startTime:"2023-05-22",
      // endTime:"",
      getDiffDay: '',
      selectTime: false,
      currentDate: new Date(),
      maxDate: new Date(),
      timeType: '',
    }
  },
  mounted() {
    // this.endTime = this.$util.getTime('','ymd');
    this.getDiffDay = this.$util.getDiffDay(this.startTime, this.endTime)
    this.initApi()
  },
  watch: {},
  components: {},
  methods: {
    geticon() {
      this.$emit('geticontrue')
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    initApi() {
      this.loading = true
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      })
      var params = {
        startTime: this.startTime,
        endTime: this.endTime,
        city: this.clickLocation.city,
      }

      meteoroStaLiveApi
        .post_tb_skzdzs_jx_elementCount(params)
        .then((res) => {
          this.elementItem = res
          this.$toast.clear()
          this.initliveCensusApi()
        })
        .catch((error) => {
          this.$toast.clear()
        })
    },
    initliveCensusApi() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      })
      var params = {
        startTime: this.startTime,
        endTime: this.endTime,
        city: this.clickLocation.city,
      }
      meteoroStaLiveApi
        .post_tb_skzdzs_jx_liveCensus(params)
        .then((res) => {
          this.liveCensusItem = res
          this.loading = false
          this.$toast.clear()
        })
        .catch((error) => {
          this.loading = false
          this.$toast.clear()
        })
    },
    confirmTime() {
      if (this.timeType == 'start') {
        if (
          new Date(this.$util.getTime(this.currentDate, 'ymd')).getTime() >
          new Date(this.endTime).getTime()
        ) {
          this.$toast('开始时间不能大于结束时间')
          return
        }
        this.startTime = this.$util.getTime(this.currentDate, 'ymd')
      } else if (this.timeType == 'end') {
        if (
          new Date(this.startTime).getTime() >
          new Date(this.$util.getTime(this.currentDate, 'ymd')).getTime()
        ) {
          this.$toast('结束时间不能小于开始时间')
          return
        }
        this.endTime = this.$util.getTime(this.currentDate, 'ymd')
      }
      this.selectTime = false
      this.getDiffDay = this.$util.getDiffDay(this.startTime, this.endTime)
      this.initApi()
    },
    selectTimeMet(type) {
      this.timeType = type
      this.selectTime = true
    },
  },
}
</script>
<style type="text/css" lang="less" scoped>
.staLiveDataDetailWrap {
  color: #fff;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  overflow: hidden;
  height: 85%;
  display: flex;
  flex-direction: column;
  .van-icon {
    font-size: 15px;
  }
  .icons {
    position: absolute;
    right: 5px;
    top: 30px;
    font-size: 15px;
  }
  .title {
    width: 100%;
    font-size: 16px;
    padding-bottom: 20px;
    height: 20px;
  }
  .sldNumCicle {
    text-align: center;
    .van-circle {
      width: 20% !important;
    }
    .van-circle__text {
      font-size: 12px;
    }
  }
  .sldAccount {
    overflow-y: scroll;
    font-size: 14px;
    height: 100%;
    width: 100%;
    .sldErrorWeather {
      margin-top: 10px;
      line-height: 26px;
      font-size: 14px;
    }
    .sldACon {
      font-size: 14px;
      line-height: 26px;
      margin-top: 5px;
    }
  }
  .selctTime {
    text-decoration: underline;
  }
}
</style>
